import React, { FC } from "react"
import z from "zod"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Mail, Lock, User, Phone } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Checkbox } from "@/components/ui/checkbox"
import { Button } from "@/components/ui/button"

type Props = {
  onSwitchToLogin: () => void
}

const formSchema = z
  .object({
    username: z.string().min(2, { message: "用户名至少需要2个字符" }),
    email: z.email({ message: "请输入有效的邮箱地址" }),
    password: z.string().min(6, { message: "密码长度不能小于6位" }),
    confirmPassword: z.string(),
    phone: z.string(),
    agreeToTerms: z.boolean().refine((val) => val === true, {
      message: "您必须同意服务条款和隐私政策"
    })
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "两次输入的密码不一致",
    path: ["confirmPassword"]
  })

/**
 * 注册表单
 */
const RegisterForm: FC<Props> = (props) => {
  const { onSwitchToLogin } = props
  const [isSubmitting, setIsSubmitting] = React.useState(false)

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      email: "",
      password: "",
      confirmPassword: "",
      phone: "",
      agreeToTerms: false
    }
  })

  const onSubmit = () => {
    setIsSubmitting(true)
  }

  return (
    <div>
      <div className="text-2xl font-bold text-center">注册</div>

      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="space-y-4">
            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>用户名</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
                      <Input className="pl-10" placeholder="请输入用户名" {...field} />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>邮箱</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
                      <Input className="pl-10" type="email" placeholder="name@example.com" {...field} />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>密码</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
                      <Input className="pl-10" type="password" placeholder="请输入密码" {...field} />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="confirmPassword"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>确认密码</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
                      <Input className="pl-10" type="password" placeholder="请再次输入密码" {...field} />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="phone"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>手机号码</FormLabel>
                  <FormControl>
                    <div className="relative">
                      <Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
                      <Input className="pl-10" type="tel" inputMode="numeric" placeholder="请输入手机号码" {...field} />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="agreeToTerms"
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <div className="flex items-center">
                      <Checkbox id="terms" checked={field.value} onCheckedChange={field.onChange} />
                      <label htmlFor="terms" className="text-sm ml-1">
                        我同意{" "}
                        <Button variant="link" className="px-0">
                          服务条款
                        </Button>{" "}
                        和{" "}
                        <Button variant="link" className="px-0">
                          隐私政策
                        </Button>
                      </label>
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>

          <div className="flex flex-col mt-8">
            <Button className="w-full" type="submit" disabled={isSubmitting}>
              {isSubmitting ? "注册中..." : "注册"}
            </Button>
            <div className="mt-4 text-center text-sm">
              已有账户?{" "}
              <Button type="button" variant="link" className="px-0" onClick={onSwitchToLogin}>
                立即登录
              </Button>
            </div>
          </div>
        </form>
      </Form>
    </div>
  )
}

export default RegisterForm
